<template>
  <div class="AddYWFTemplate">
    <div class="cus-title-1">
      <b v-if="$route.params.edit">编辑运维费模板</b>
      <b v-else>添加运维费模板</b>
    </div>
    <el-form ref="forms" :model="BindForm" :rules="pattern">
      <el-form-item label="模板名称:" prop="tamplateName">
        <el-col :span="20">
          <el-input
            v-model="BindForm.tamplateName"
            class="cus-input"
            maxlength="20"
            placeholder="输入模板名称"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="商品类型:" prop="commodityType">
        <el-col :span="20">
          <el-radio
            v-model="BindForm.commodityType"
            label="0"
            @change="handelChange"
          >售卖</el-radio>
          <el-radio
            v-model="BindForm.commodityType"
            label="1"
            @change="handelChange"
          >租赁</el-radio>
        </el-col>
      </el-form-item>
      <el-form-item label="费用设置:" required>
        <el-col v-if="BindForm.commodityType == '1'" :span="10">
          <div class="el-Bindata">
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'b' + index"
              :prop="'Bindata.' + index + '.pHuo'"
              :rules="[
                { required: true, message: '配货不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>
                配货（元）
              </div>
              <el-input v-model="item.pHuo" style="width:100px" />
            </el-form-item>
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'a' + index"
              :prop="'Bindata.' + index + '.pSong'"
              :rules="[
                { required: true, message: '配送不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>
                配送（元）
              </div>
              <el-input v-model="item.pSong" style="width:100px" />
            </el-form-item>
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'c' + index"
              :prop="'Bindata.' + index + '.pWihu'"
              :rules="[
                { required: true, message: '维护不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>维护（元）</div>
              <el-input v-model="item.pWihu" style="width:100px" />
            </el-form-item>
          </div>
        </el-col>
        <el-col v-if="BindForm.commodityType == '0'" :span="10">
          <div class="el-Bindata">
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'d' + index"
              :prop="'Bindata.' + index + '.pHuo'"
              :rules="[
                { required: true, message: '配货不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>
                配货（元）
              </div>
              <el-input v-model="item.pHuo" style="width:100px" />
            </el-form-item>
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'e' + index"
              :prop="'Bindata.' + index + '.pSong'"
              :rules="[
                { required: true, message: '配送不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>
                配送（元）
              </div>
              <el-input v-model="item.pSong" style="width:100px" />
            </el-form-item>
            <el-form-item
              v-for="(item, index) in BindForm.Bindata"
              :key="'c' + index"
              :prop="'Bindata.' + index + '.pWihu'"
              :rules="[
                { required: true, message: '维护不能为空', trigger: 'blur' },
                {
                  trigger: ['change','blur'],
                  validator: validate.isFloateger
                }
              ]"
            >
              <div>维护（元）</div>
              <el-input v-model="item.pWihu" style="width:100px" />
            </el-form-item>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item class="footer">
        <el-button
          type="primary"
          :loading="butloading"
          @click="handelSubmit"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  YWFTemplateAdd,
  YWFTemplateEdit
} from '@/api/customAPI/shop/YWFTemplate'
import validate from '@/utils/formValidate'
/** 添加运维费模板 */
export default {
  name: 'AddYWFTemplate',
  data() {
    return {
      butloading: false,
      validate,
      BindForm: {
        shopId: localStorage.getItem('shopId'),
        tamplateName: '',
        commodityType: '0',
        Bindata: [
          {
            pHuo: 0,
            pSong: 0,
            pWihu: 0
          }
        ]
      },
      pattern: {
        Bindata: [
          { required: true, message: '请输入', trigger: 'blur', type: 'object' }
        ],
        commodityType: [{ required: true, message: '请输入', trigger: 'blur' }],
        tamplateName: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loadding()
  },
  methods: {
    handelChange() {
      this.BindForm.Bindata[0].pHuo = 0
      this.BindForm.Bindata[0].pSong = 0
      this.BindForm.Bindata[0].pWihu = 0
    },
    /** 初始化 */
    loadding() {
      if (this.$route.params.row) {
        this.BindForm.tamplateName = this.$route.params.row.name
        this.BindForm.commodityType = this.$route.params.row.type.toString()
        this.BindForm.Bindata[0].pHuo = this.$route.params.row.distributionPrice
        this.BindForm.Bindata[0].pSong = this.$route.params.row.deliveryPrice
        this.BindForm.Bindata[0].pWihu = this.$route.params.row.maintainPrice
      }
    },
    /** 提交 */
    handelSubmit() {
      this.butloading = true
      this.$refs.forms.validate(v => {
        if (v) {
          if (this.$route.params.edit) {
            YWFTemplateEdit({
              templateId: this.$route.params.row.id,
              templateName: this.BindForm.tamplateName,
              commodityType: this.BindForm.commodityType,
              pHuo: parseFloat(this.BindForm.Bindata[0].pHuo),
              pSong: parseFloat(this.BindForm.Bindata[0].pSong),
              pWihu: parseFloat(this.BindForm.Bindata[0].pWihu),
              shopId: localStorage.getItem('shopId')
            })
              .then(() => {
                this.butloading = false
                this.$store.dispatch('tagsView/delView', this.$route)
                this.$message.success('成功编辑')
                this.$router.go(-1)
              })
              .catch(() => {
                this.butloading = false
              })
          } else {
            YWFTemplateAdd({
              shopId: localStorage.getItem('shopId'),
              templateName: this.BindForm.tamplateName,
              commodityType: this.BindForm.commodityType,
              pHuo: this.BindForm.Bindata[0].pHuo,
              pSong: this.BindForm.Bindata[0].pSong,
              pWihu: this.BindForm.Bindata[0].pWihu
            })
              .then(() => {
                this.butloading = false
                this.$store.dispatch('tagsView/delView', this.$route)
                this.$message.success('添加成功')
                this.$router.go(-1)
              })
              .catch(() => {
                this.butloading = false
              })
          }
        } else {
          this.butloading = false
        }
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    if (to.params.edit) {
      to.meta.title = '编辑运维费模版'
    } else {
      to.meta.title = '添加运维费模版'
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // ....
    this.$store.dispatch('tagsView/delView', from)
    next()
  }
}
</script>

<style lang="scss" scoped>
.AddYWFTemplate {
  padding: 50px 100px;
  .cus-title-1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    background: #f3f3f3;
    padding: 0px 20px;
    margin-bottom: 40px;
  }
  ::v-deep.el-form {
    margin-top: 40px;
    .el-form-item__error {
      margin-left: 100px;
    }
    .el-Bindata {
      display: flex;
      .el-form-item__error {
        margin-left: 0px;
      }
    }
    .el-form-item__label {
      width: 100px;
      text-align: start;
    }
    .el-form-item {
      padding-left: 20px;
      .el-input {
        width: 200px;
      }
    }
  }
  ::v-deep.el-table {
    td {
      border: none !important;
    }
    .is-leaf {
      border: none;
    }
    .is-center {
      padding: 0;
      padding-bottom: 10px;
    }
  }
  .el-table::before {
    height: 0 !important;
  }
  .footer {
    width: 100%;
    margin-top: 100px;
    .el-button {
      width: 150px;
      margin-left: 100px;
    }
  }
}
</style>
